

import main from '../../main';
import { apiGeCardPackOrder } from '../../api';
import Fullscreen from '../../components/fullscreen';
import { Empty, Pagination, Popover, Select, Table, Tooltip } from '@arco-design/web-react';
import { useEffect, useState } from 'react';
import { dictDataOptions, dictTag, } from '../../utils/utils';
import { keepCopy, tagCopy } from '../../components/tableColumn';
import { getDict } from '../../utils/utils';
import dayjs from 'dayjs';
import LoadingMask from '../../components/loadingMask';
interface Props {
    iccid: string
}
// 系统开关 状态
const CARD_PACK_ORDER_STATUS = 'card_pack_order_status';
const PAY_CONFIG_PAY_TYPE = 'pay_config_pay_type';
const CARD_PACK_ORDER_DETAIL_STATUS = 'card_pack_order_detail_status';
export default function InProgress({ iccid }: Props) {
    const [dataSource, setdataSource] = useState<any[]>([])
    const [filterData, setFilterData] = useState<any[]>([])
    const [value, setvalue] = useState('Y')
    const [total, settotal] = useState(0)
    const [pageNum, setpageNum] = useState(1)
    const [pageSize, setpageSize] = useState(1000)
    const [dictDatas, setDictDatas] = useState<Record<string, any>>({});
    useEffect(() => {
        async function fetchDictData() {
            const data = await getDict(CARD_PACK_ORDER_STATUS, PAY_CONFIG_PAY_TYPE, CARD_PACK_ORDER_DETAIL_STATUS);
            setDictDatas(data);
        }

        fetchDictData();
    }, []);
    useEffect(() => {
        getList(iccid, pageNum, pageSize)
    }, [iccid])
    async function getList(iccid: string, pageNum: string | number, pageSize: string | number) {
        LoadingMask.show('正在加载...');
        const res = await apiGeCardPackOrder(iccid, pageNum, pageSize)
        if (res?.data?.rows?.length > 0) {
            setdataSource([...res.data.rows,])
            getFilterData(value,res.data.rows)
        }

        settotal(res?.data?.total)
        LoadingMask.hide();
    }
    function handlePageAndSizeChange(page: number, size: number) {
        if (page === pageNum && size === pageSize) return;

        setpageSize(size);
        setpageNum(page);
        getList(iccid, pageNum, pageSize)
    }


    // 定义表格内的列
    // const columns = [
    //     {
    //         title: '订单号',
    //         dataIndex: 'id',
    //         key: 'id',
    //         width: 100,
    //         render: (v: string) => (
    //             <div className="d-flex-r ai-center">
    //                 {tagCopy(v)}

    //             </div>
    //         ),
    //     },
    //     {
    //         title: '卡产品名',
    //         dataIndex: 'cardProductName',
    //         key: 'cardProductName',
    //         width: 100,
    //         render: (v: string, record: any) => (record.supplierProductName ?? '') + '-' + v,
    //     },
    //     {
    //         title: '套餐名称',
    //         dataIndex: 'packName',
    //         key: 'packName',
    //         width: 100,
    //     },

    //     {
    //         title: '套餐包名称',
    //         dataIndex: 'packDetailName',
    //         width: 140,
    //         key: 'packDetailName',
    //         render: (v: string, record: any) => (
    //             <>
    //                 {(record.cardPackOrderDetailList?.length ?? 0) > 0 ? (
    //                     <Popover
    //                         style={{ maxWidth: '1300px', marginLeft: '10px' }}
    //                         content={
    //                             <Table
    //                                 size="small"
    //                                 scroll={{
    //                                     y: 500,
    //                                 }}
    //                                 className="bw-100"
    //                                 data={record.cardPackOrderDetailList}
    //                                 columns={dataColumns}
    //                                 pagination={false}
    //                                 noDataElement={<Empty description="暂无数据" />}
    //                             />
    //                         }
    //                     >
    //                         <span className="cursor-pointer">{v}</span>
    //                     </Popover>
    //                 ) : (
    //                     <span>{v}</span>
    //                 )}
    //             </>
    //         ),
    //     },

    //     {
    //         title: '支付方式',
    //         dataIndex: 'payType',
    //         width: 100,
    //         key: 'payType',
    //         render: (v: string) => dictTag(v, dictDatas[PAY_CONFIG_PAY_TYPE]),
    //     },
    //     {
    //         title: '充值卡号',
    //         dataIndex: 'iccid',
    //         width: 120,
    //         key: 'iccid',
    //         render: (v: string) => (
    //             <div className="d-flex-r ai-center">
    //                 {keepCopy(v)}

    //             </div>
    //         ),
    //     },
    //     {
    //         title: '代理名称',
    //         dataIndex: 'deptName',
    //         width: 100,
    //         key: 'deptName',
    //     },
    //     {
    //         title: '套餐数量',
    //         dataIndex: 'number',
    //         width: 100,
    //         key: 'number',
    //     },
    //     {
    //         title: '订单金额',
    //         dataIndex: 'orderPrice',
    //         width: 100,
    //         key: 'orderPrice',
    //     },
    //     {
    //         title: '实付金额',
    //         dataIndex: 'realPrice',
    //         width: 100,
    //         key: 'realPrice',
    //     },
    //     {
    //         title: '优惠券抵扣',
    //         dataIndex: 'couponPrice',
    //         width: 100,
    //         key: 'couponPrice',
    //     },
    //     {
    //         title: '总金额',
    //         dataIndex: 'totalPrice',
    //         width: 100,
    //         key: 'totalPrice',
    //     },
    //     {
    //         title: '订单状态',
    //         dataIndex: 'status',
    //         width: 100,
    //         key: 'status',
    //         render: (v: string) => dictTag(v, dictDatas[CARD_PACK_ORDER_STATUS]),
    //     },
    //     {
    //         title: '创建人',
    //         dataIndex: 'createBy',
    //         width: 100,
    //         key: 'createBy',
    //     },
    //     {
    //         title: '创建时间',
    //         dataIndex: 'createTime',
    //         width: 180,
    //         key: 'createTime',
    //     },

    // ];
    // 定义类型表格内的列
    // const dataColumns = [
    //     {
    //         title: '充值卡号',
    //         dataIndex: 'iccid',
    //         key: 'iccid',
    //     },
    //     {
    //         title: '当前/总期数',
    //         dataIndex: 'thisPhases',
    //         key: 'thisPhases',
    //         render: (v: string, record: any) => (
    //             <span>
    //                 {v}/{record?.totalPhases}
    //             </span>
    //         ),
    //     },
    //     {
    //         title: '套餐金额',
    //         dataIndex: 'salePrice',
    //         key: 'salePrice',
    //         width: 100,
    //     },
    //     {
    //         title: '订单金额',
    //         dataIndex: 'orderPrice',
    //         key: 'orderPrice',
    //         width: 100,
    //     },
    //     {
    //         title: '实付金额',
    //         dataIndex: 'realPrice',
    //         key: 'realPrice',
    //         width: 100,
    //     },
    //     {
    //         title: '优惠金额',
    //         dataIndex: 'couponPrice',
    //         key: 'couponPrice',
    //         width: 100,
    //     },
    //     {
    //         title: '生效时间',
    //         dataIndex: 'startEffectTime',
    //         key: 'startEffectTime',
    //         render: (v: string) => dayjs(v).format('YYYY-MM-DD HH:mm'),
    //     },
    //     {
    //         title: '结算时间',
    //         dataIndex: 'endEffectTime',
    //         key: 'endEffectTime',
    //         render: (v: string) => dayjs(v).format('YYYY-MM-DD HH:mm'),
    //     },
    //     {
    //         title: '状态',
    //         dataIndex: 'status',
    //         key: 'status',
    //         render: (v: string) => dictTag(v, dictDatas[CARD_PACK_ORDER_DETAIL_STATUS]),
    //     },
    // ];
    function getFilterData(value: string,list?: any[]) {
        const data = list || [...dataSource]
        
        const filterData = data.filter((item) => item.status === value) || [];
        setFilterData(filterData)
    }
    return (

        <div className='p-10 bw-100 bh-100 inProgress'>
            {/* <Fullscreen className='bw-100 bh-100'
                onFullscreenChange={(isFull) => {
                    setisFull(isFull)
                }}
            > */}
            <div className="page-content bh-100 minh-200  d-flex-r ai-start flex-wrap" style={{
                rowGap: '10px',
                columnGap: '10px'
            }}>

                {/* <Table
                        className="custom-table-header-bg"
                        data={dataSource}
                        style={{height: '100%'}}
                        columns={columns}
                        pagination={false}
                        loading={loading}
                        scroll={!isFull ? { y: 350, x: 1000 } : { y: 'calc(100% - 90px)', x: 1000 }}
                        noDataElement={<Empty description={'暂无数据'} />}
                    />
                    <Pagination
                        className="pagination-block"
                        pageSizeChangeResetCurrent={false}
                        total={total || 0}
                        current={pageNum}
                        pageSize={pageSize}
                        showJumper
                        sizeCanChange
                        sizeOptions={main.defaultPageSizeOptions}
                        showTotal={(total) => `共${total}条`}
                        size="small"
                        onChange={handlePageAndSizeChange}
                    /> */}
                <div  style={{ width: '100%' }}>
                    <Select
                        allowClear
                        value={value}
                        placeholder='请选择状态'
                        style={{ width: '200px',float:'right' }}
                        options={dictDataOptions(dictDatas[CARD_PACK_ORDER_DETAIL_STATUS])}
                        onChange={(value) =>{
                            setvalue(value)
                            if(!value){
                                return setFilterData(dataSource)
                            }
                            getFilterData(value)
                        }}
                    />
                </div>



                {
                    filterData?.map(item => {
                        return <div className='bg-white p-10 item-width-2 border-radius-20'>
                            <div className='text-color-p font-size-14 line-height-30'>
                                {item.packDetailName}
                                <span style={{ float: 'right' }}>{dictTag(item.status, dictDatas[CARD_PACK_ORDER_DETAIL_STATUS])}</span>
                            </div>
                            <div className='text-color-9 font-size-12  line-height-24'>
                                卡号:{iccid}
                            </div>
                            <div className='text-color-9  font-size-12 line-height-24'>
                                订单号:{item.id}
                            </div>
                            <div className='text-color-9  font-size-12  line-height-24'>
                                总期数:{item.totalPhases}
                            </div>
                            <div className='text-color-9  font-size-12 line-height-24'>
                                当前期数:{item.thisPhases}
                            </div>
                            <div className='text-color-9 font-size-12  line-height-24'>
                                有效期:{item.startEffectTime ? dayjs(item.startEffectTime).format('YYYY-MM-DD') : ''} - {item.endEffectTime ? dayjs(item.endEffectTime).format('YYYY-MM-DD') : ''}
                            </div>
                            <div className='text-color-9 font-size-12  line-height-24'>
                                订购时间:{item.createTime}
                            </div>
                        </div>
                    })
                }
            </div>

            {/* </Fullscreen> */}

        </div>


    );
}

